﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="gbk">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="robots" content="all">
  <meta name="author" content="Tencent-CP">
  <meta name="Copyright" content="Tencent">

  <style>
    body, dl, dd, ul, ol, h1, h2, h3, h4, h5, h6, p, form { margin: 0; }
    body, button, input, select, textarea { font: 12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif; }
    h1, h2, h3, h4, h5, h6 { font-size: 100%; }
    em, b { font-style: normal; }
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    img { border: 0; }
    button, input, select, textarea { font-size: 100%; outline: none; }
    table { border-collapse: collapse; border-spacing: 0; }
    td, th, ul, ol { padding: 0; }
    ul, ol, dl { list-style: none; }
    .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    .clearfix { *zoom: 1; }
   
    #afooter { background: #000000; text-align: center; }
    #afooter .wrap_ieg { width: 1240px; margin: 0 auto; padding: 30px 0; }
    #afooter p { color: #6e6e6e; line-height: 24px; font-size: 10px; }
    #afooter a { color: #6e6e6e; font-size: 12px; }
    .fl { float: left; }
    .fr { float: right; }
    .chromeframe { background: #000; color: #fff; padding: 10px 0; text-align: center; width: 100%; font-size: 14px; }
    .chromeframe a { color: #F13C35; }
    .comm-head { position: relative !important; background: #000000; }
    .comm-topact { display: none; }
    html, body { background: #000; }
    .g-wrap { position: relative; width: 100%; max-width: 1920px; min-width: 1240px; overflow: hidden; height: 940px; margin: 0 auto; }
    .g-main { width: 100%; height: 100%; position: relative; perspective: 800px; -webkit-perspective: 800px; }
    .g-main .logo { background: url("images/logo.png"); display: block; position: absolute; width: 201px; height: 50px; left: 37px; top: 37px; }
    .g-main .time { background: url("images/time.png"); width: 240px; height: 42px; position: absolute; top: 50%; left: 50%; margin: 192px 0 0 -120px; display: none; }
    .g-main .time.animIn { display: block; animation: op 0.5s; -webkit-animation: op 0.5s; }
    .bg-box { width: 100%; height: 100%; min-width: 1200px; position: absolute; top: 0; left: 0; overflow: hidden; will-change: contents; }
    .bg-outter-box { max-width: 1920px; }
    .parallax { position: absolute; height: 100%; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%) !important; overflow: hidden; }
    .parallax .layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
    .parallax .bg-box { width: calc(100% + 80px); height: 100%; margin-left: -40px; }
    .parallax .bg { background: url("images/bg.jpg") center top; width: 100%; height: 100%; animation: bgIn 4s; -webkit-animation: bgIn 4s; }
    .parallax .rock { position: absolute; left: 50%; top: 50%; background: url(images/rock.png); width: 1007px; height: 288px; margin-left: -670px; margin-top: 60px; }
    .mask-bottom { width: 100%; height: 446px; min-width: 1200px; position: absolute; bottom: 0; left: 0; background: url("images/bottom-mask.png"); }
    .cloud { width: 818px; height: 543px; background: url("images/cloud.png"); position: fixed; right: -160px; left: auto; bottom: -140px; z-index: 10; }
    .cloud2 { width: 468px; height: 153px; background: url("images/cloud2.png"); position: fixed; bottom: 240px; z-index: 10; left: -180px; top: 50%; margin-top: -30px; }
    .cloud2.flip { right: -180px; left: auto; bottom: auto; }
    .flip { transform: rotateY(180deg); bottom: -140px; left: -160px; }
    .content-box { margin: 0 auto; position: relative; overflow: hidden; -webkit-transition: transform 1s linear; transition: transform 1s linear; }
    .index-title2 { background: url("images/index-title2.png") no-repeat; width: 282px; height: 68px; position: absolute; top: 50%; margin-top: -50px; left: 50%; margin-left: -141px; display: none; }
    .index-title2.animIn { display: block; animation: titleIn 1s; -webkit-animation: titleIn 1s; }
    .index-title1 { background: url("images/index-title1.png") no-repeat; width: 706px; height: 122px; position: absolute; top: 50%; left: 50%; margin-left: -353px; margin-top: 35px; display: none; }
    .index-title1.animIn { display: block; animation: titleIn 1s; -webkit-animation: titleIn 1s; }
    .cup-box { width: 360px; height: 740px; position: absolute; left: 50%; margin-left: -180px; top: 50%; margin-top: -310px; overflow: hidden; display: block; background-image: url("images/cup_spr.png"); background-repeat: no-repeat; animation: cup_spr 1.5s steps(16, end) infinite; -webkit-animation: cup_spr 1.5s steps(16, end) infinite; }
    @keyframes cup_spr { 0% { background-position-x: 0; }
      100% { background-position-x: 106.66667%; } }
    @-webkit-keyframes cup_spr { 0% { background-position-x: 0; }
      100% { background-position-x: 106.66667%; } }
    .cup-box-wrap { display: none !important; }
    .cup-box-wrap.animIn { display: block !important; animation: cupIn 1s; -webkit-animation: cupIn 1s; }
    .parallax2 { z-index: 10; pointer-events: none; max-width: 1920px; }
    .indexenter { display: none; }
    .btns-wrap { position: absolute; width: 100%; height: 150px; line-height: 150px; text-align: center; font-size: 0; top: 700px; display: none; will-change: contents; -webkit-transform-origin: 50% 45px; -ms-transform-origin: 50% 45px; -o-transform-origin: 50% 45px; transform-origin: 50% 45px; }
    .btns-wrap.animIn { display: block; animation: btnsIn 0.7s ease-out; -webkit-animation: btnsIn 0.7s ease-out; }
    .btns-wrap > a { display: inline-block; vertical-align: middle; margin: 0 10px; overflow: visible; position: relative; -webkit-transition: transform 0.35s; transition: transform 0.35s; }
    .btns-wrap > a:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
    .btns-wrap > a:hover:after { display: block; animation: op 0.5s; -webkit-animation: op 0.5s; }
    .btns-wrap > a:after { content: '\0020'; display: none; position: absolute; left: 0; top: 0; filter: brightness(1.05); -webkit-filter: brightness(1.05); }
    .btns-wrap > .btn-inlol { background: url("images/btn-inlol.png"); width: 206px; height: 60px; }
    .btns-wrap > .btn-inlol:after { background: url("images/btn-inlol-hover.png"); width: 206px; height: 60px; }
    .btns-wrap > .btn-main { background: url("images/btn-main.png"); width: 206px; height: 70px; margin-top: 10px; }
    .btns-wrap > .btn-main:after { background: url("images/btn-main-on.png"); width: 224px; height: 87px; left: 50%; top: 50%; margin: -44px 0 0 -112px; display: block !important; animation: op 0.75s alternate infinite; -webkit-animation: op 0.75s alternate infinite; }
    .btns-wrap > .btn-download { background: url("images/btn-download.png"); width: 206px; height: 60px; }
    .btns-wrap > .btn-download:after { background: url("images/btn-download-hover.png"); width: 206px; height: 60px; }
    @keyframes op { 0% { opacity: 0; }
      100% { opacity: 1; } }
    @-webkit-keyframes op { 0% { opacity: 0; }
      100% { opacity: 1; } }
    @keyframes bgIn { 0% { -webkit-transform: scale(1.15);
      transform: scale(1.15); }
      100% { -webkit-transform: scale(1);
        transform: scale(1); } }
    @-webkit-keyframes bgIn { 0% { -webkit-transform: scale(1.15);
      transform: scale(1.15); }
      100% { -webkit-transform: scale(1);
        transform: scale(1); } }
    @keyframes cupIn { 0% { opacity: 0;
      -webkit-transform: translateY(150px) scale(0.9, 1.1);
      transform: translateY(150px) scale(0.9, 1.1); }
      100% { opacity: 1;
        -webkit-transform: translateY(0) scale(1, 1);
        transform: translateY(0) scale(1, 1); } }
    @-webkit-keyframes cupIn { 0% { opacity: 0;
      -webkit-transform: translateY(150px) scale(0.9, 1.1);
      transform: translateY(150px) scale(0.9, 1.1); }
      100% { opacity: 1;
        -webkit-transform: translateY(0) scale(1, 1);
        transform: translateY(0) scale(1, 1); } }
    @keyframes titleIn { 0% { opacity: 0;
      -webkit-transform: translateY(150px);
      transform: translateY(150px); }
      100% { opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0); } }
    @-webkit-keyframes titleIn { 0% { opacity: 0;
      -webkit-transform: translateY(150px);
      transform: translateY(150px); }
      100% { opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0); } }
    @keyframes btnsIn { 0% { opacity: 0;
      -webkit-transform: rotateX(90deg);
      transform: rotateX(90deg); }
      50% { opacity: 1;
        -webkit-transform: rotateX(-22.5deg);
        transform: rotateX(-22.5deg); }
      70% { opacity: 1;
        -webkit-transform: rotateX(11deg);
        transform: rotateX(11deg); }
      90% { opacity: 1;
        -webkit-transform: rotateX(-5deg);
        transform: rotateX(-5deg); }
      100% { opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg); } }
    @-webkit-keyframes btnsIn { 0% { opacity: 0;
      -webkit-transform: rotateX(90deg);
      transform: rotateX(90deg); }
      50% { opacity: 1;
        -webkit-transform: rotateX(-22.5deg);
        transform: rotateX(-22.5deg); }
      70% { opacity: 1;
        -webkit-transform: rotateX(11deg);
        transform: rotateX(11deg); }
      90% { opacity: 1;
        -webkit-transform: rotateX(-5deg);
        transform: rotateX(-5deg); }
      100% { opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg); } }
  </style>
  <link rel="stylesheet" href="css/topfoot.css">
</head>
<body>




<div class="comm-topact big">
  <img class="topact-big-img">
  <img class="topact-small-img">
  <div class="act-fullscreen-mask"></div>
  <div class="dark-mask"></div>
  <div class="comm-topact-inner">
    <a class="top-act-link" href="javascript:" onclick="pgvSendClick({hottag:'v3.topact.act.link'})" target="_blank">�鿴����</a>
    <div id="J_topActVersion" class="top-version">��ǰ��Ϸ�汾��<em>Ver ***</em> <a class="top-version-link" href="javascript:" onclick="pgvSendClick({hottag:'v3.topact.version.link'})" target="_blank">�汾����</a></div>
  </div>
</div>

<div class="g-wrap">

    <div class="bg-box bg-outter-box">

      <div class="parallax" id="parallax">
        <div class="layer" data-depth="0.08">
          <div class="bg-box">
            <div class="bg"></div>
          </div>
        </div>
        <div class="layer" data-depth="0.2">
          <div class="index-title2 content-box content-box1 on"></div>
        </div>
        <div class="layer cup-box-wrap" data-depth="0.3">
          <div class="cup-box content-box content-box2 on"></div>
        </div>
        <div class="layer" data-depth="0.4">
          <div class="index-title1 content-box content-box3 on"></div>
        </div>
      </div>
      <!--ǰ�� ��-->
      <div class="parallax parallax2" id="parallax2">
        <div class="layer" data-depth="0.15">
          <div class="cloud2"></div>
          <div class="cloud2 flip"></div>
        </div>
        <div class="layer" data-depth="0.35">
          <div class="cloud"></div>
          <div class="cloud flip"></div>
        </div>
      </div>
 
      <div class="mask-bottom"></div>
    </div>
    
    

  <div class="g-main">
    <a href="javascript:" title="" class="logo"></a>
    <i class="time" title=""></i>
  </div>
</div>

<script src="js/jquery-1.9.0.min.js"></script>

<!--<script src="js/milo.js"></script>
<script src="js/lol_server_select.js"></script>
<script src="js/lol_login.js"></script>
<script src="js/topmodule.js"></script>-->

<script src="js/parallax-face-cursor.js"></script>

<script>
    var PageJs={
        init:function () {
       
            var tempImg = new Image();
            tempImg.onload = function () {
                this.pageInAnim();
                setTimeout(function () {
                    this.viewOffsetAnim();
                }.bind(this),2200);
            }.bind(this);
            tempImg.src='images/cup_spr.png';
        },
        
        pageInAnim:function(){
            $('.index-title2').addClass('animIn');
            setTimeout(function () {
                $('.cup-box-wrap').addClass('animIn');
            },500);
            setTimeout(function () {
                $('.index-title1').addClass('animIn');
            },850);
            setTimeout(function () {
                $('.g-main .time').addClass('animIn');
            },1500);
            setTimeout(function () {
                $('.btns-wrap').addClass('animIn');
            },1900);
        },
       
        viewOffsetAnim:function(){
            new Parallax(document.getElementById('parallax'));
            new Parallax( document.getElementById('parallax2'));
            $(".content-box1").faceCursor({
                avertCursor: true,
                perspective: "7rem",
                cacheElementData: false
            });
            $(".content-box2").faceCursor({
                avertCursor: true,
                perspective: "1rem",
                cacheElementData: false
            });
            $(".content-box3").faceCursor({
                avertCursor: true,
                perspective: "7rem",
                cacheElementData: false
            });
        }
    };
    PageJs.init();
</script>

<script src="js/tcss.ping.https.js"></script>
<script>if (typeof(pgvMain) === 'function')pgvMain();</script>


     <a href="index.html" style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"></a>
</body>
</html>
